<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图书借阅系统 - 用户信息</title>
    <!-- 引入 Google Fonts 以使用更现代的字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* 全局样式 */
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
            color: #333;
            background-image: url('https://images.unsplash.com/photo-1507842217343-583bb7270b66');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        nav {
            background-color: rgba(44, 62, 80, 0.9);
            overflow: hidden;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        nav ul li {
            margin: 0 10px;
        }

        nav ul li a {
            display: block;
            color: white;
            text-align: center;
            padding: 16px 20px;
            text-decoration: none;
            transition: background-color 0.3s ease, transform 0.3s ease;
            font-size: 16px;
        }

        nav ul li a:hover {
            background-color: #34495e;
            transform: scale(1.05);
        }

        .container {
            max-width: 800px;
            width: 90%;
            padding: 80px 40px 40px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            margin-top: 50px;
            animation: fadeIn 0.5s ease;
            transition: box-shadow 0.3s ease;
        }

        .container:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 {
            font-size: 3em;
            color: #2c3e50;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 35px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            background: -webkit-linear-gradient(45deg, #2c3e50, #007BFF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #user-info {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        #user-info img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-bottom: 20px;
        }

        #user-info p {
            font-size: 1.2em;
            margin: 10px 0;
        }

        .edit-form {
            display: none;
            margin-top: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .edit-form input {
            width: 100%;
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 16px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .edit-form input:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }

        .edit-form button {
            padding: 15px 30px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            font-size: 16px;
            font-weight: 500;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-right: 10px;
        }

        .edit-form button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        .edit-button {
            padding: 15px 30px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            font-size: 16px;
            font-weight: 500;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-right: 10px;
        }

        .edit-button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        #change-password-form {
            display: none;
            margin-top: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        #new-password-fields {
            display: none;
        }

        /* 新增的更新头像按钮样式 */
        .update-avatar-button {
            padding: 15px 30px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            font-size: 16px;
            font-weight: 500;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 10px 0;
        }

        .update-avatar-button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        /* 图片放大相关样式 */
        #enlargedImageContainer {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        #enlargedImage {
            max-width: 80%;
            max-height: 80%;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<nav>
    <ul>
        <li><a href="http://localhost:8888/lib/hello">首页</a></li>
        <li><a href="http://localhost:8888/lib/book">图书列表</a></li>
        <li><a href="http://localhost:8888/lib/borrow">借阅记录</a></li>
        <li><a href="http://localhost:8888/lib/userinfo">用户信息</a></li>
        <li><a href="http://localhost:8888/api/outLogin">退出登录</a></li>
    </ul>
</nav>
<div class="container">
    <h1>用户信息</h1>
    <div id="user-info">
        <!-- 用户信息将通过 jQuery 动态加载 -->
    </div>
    <button class="edit-button" id="edit-username-button">修改用户名</button>
    <button class="edit-button" id="edit-email-button">修改邮箱</button>
    <button class="edit-button" id="change-password-button">修改密码</button>
    <!-- 新增的更新头像按钮 -->
    <button class="update-avatar-button" id="update-avatar">更新头像</button>
    <form class="edit-form" id="edit-username-form">
        <label for="new-username"></label><input type="text" id="new-username" placeholder="新用户名">
        <button type="button" id="save-username-changes">保存用户名修改</button>
        <button type="button" id="cancel-username-changes">取消用户名修改</button>
    </form>
    <form class="edit-form" id="edit-email-form">
        <label for="new-email"></label><input type="email" id="new-email" placeholder="新邮箱">
        <button type="button" id="save-email-changes">保存邮箱修改</button>
        <button type="button" id="cancel-email-changes">取消邮箱修改</button>
    </form>
    <form id="change-password-form" class="edit-form">
        <label for="old-password"></label><input type="password" id="old-password" placeholder="原密码">
        <button type="button" id="verify-old-password">验证原密码</button><br>
        <div id="new-password-fields">
            <label for="new-password"></label><input type="password" id="new-password" placeholder="新密码">
            <label for="confirm-new-password"></label><input type="password" id="confirm-new-password" placeholder="确认新密码">
            <button type="button" id="save-new-password">保存新密码</button>
        </div>
        <br>
        <button type="button" id="cancel-change-password">取消</button>
    </form>
    <div id="enlargedImageContainer">
        <img id="enlargedImage" src="" alt="放大后的用户头像">
    </div>
</div>
<script>
    $(document).ready(function () {
        // 加载用户信息
        $.ajax({
            url: '/api/user-info',
            method: 'GET',
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (user) {
                const userInfo=user.data;
                // 解析并渲染数据，添加头像展示
                const userInfoHtml = `
                        <img src="data:image/jpeg;base64,${userInfo.avatar}" alt="用户头像" id="user-avatar">
                        <div class="info-content">
                            <p>卡号: ${userInfo.cardId}</p>
                            <p>用户名: <span id="current-username">${userInfo.username}</span></p>
                            <p>邮箱: <span id="current-email">${userInfo.email}</span></p>
                            <p>剩余可借阅数量: ${userInfo.nums}</p>
                        </div>
                    `;
                $('#user-info').html(userInfoHtml);

                // 为头像添加点击事件
                $('#user-avatar').click(function () {
                    const imgSrc = $(this).attr('src');
                    $('#enlargedImage').attr('src', imgSrc);
                    $('#enlargedImageContainer').css('display', 'flex');
                });
            },
            error: function () {
                alert('加载用户信息失败');
            }
        });

        // 修改用户名相关逻辑
        $('#edit-username-button').click(function () {
            $('#edit-username-form').show();
            $(this).hide();
        });
        $('#cancel-username-changes').click(function () {
            $('#edit-username-form').hide();
            $('#edit-username-button').show();
        });
        $('#save-username-changes').click(function () {
            const newUsername = $('#new-username').val();
            if (newUsername === '') {
                alert('请输入新的用户名');
                return;
            }
            $.ajax({
                url: '/updateUser/update-username',
                method: 'POST',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: {
                    username: newUsername
                },
                success: function (data) {
                    if (data.msg === '用户名已存在...') {
                        alert(data.msg);
                    } else {
                        alert(data.msg);
                        window.location.reload();
                    }
                },
                error: function () {
                    alert('用户名修改失败，请稍后重试');
                }
            });
        });

        // 修改邮箱相关逻辑
        $('#edit-email-button').click(function () {
            $('#edit-email-form').show();
            $(this).hide();
        });
        $('#cancel-email-changes').click(function () {
            $('#edit-email-form').hide();
            $('#edit-email-button').show();
        });
        $('#save-email-changes').click(function () {
            const newEmail = $('#new-email').val();
            if (newEmail === '') {
                alert('请输入新的邮箱');
                return;
            }
            $.ajax({
                url: '/updateUser/update-email',
                method: 'POST',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: {
                    email: newEmail
                },
                success: function (data) {
                    alert(data.msg);
                    window.location.reload();
                },
                error: function () {
                    alert('邮箱修改失败，请稍后重试');
                }
            });
        });

        // 显示修改密码表单
        $('#change-password-button').click(function () {
            $('#change-password-form').show();
            $(this).hide();
        });

        // 取消修改密码
        $('#cancel-change-password').click(function () {
            $('#change-password-form').hide();
            $('#change-password-button').show();
            $('#old-password').val('');
            $('#new-password').val('');
            $('#confirm-new-password').val('');
            $('#new-password-fields').hide();
            $('#verify-old-password').show();
        });

        // 验证原密码
        $('#verify-old-password').click(function () {
            const oldPassword = $('#old-password').val();
            if (oldPassword === '') {
                alert('请输入原密码');
                return;
            }

            $.ajax({
                url: '/updateUser/verify-password',
                method: 'POST',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: {
                    oldPassword: oldPassword
                },
                success: function (data) {
                    if (data.msg === '验证成功') {
                        alert('原密码验证成功，请输入新密码');
                        $('#new-password-fields').show();
                        $('#verify-old-password').hide();
                    } else {
                        alert('原密码验证失败，请重新输入');
                    }
                },
                error: function () {
                    alert('验证失败，请稍后重试');
                }
            });
        });

        // 保存新密码
        $('#save-new-password').click(function () {
            const newPassword = $('#new-password').val();
            const confirmNewPassword = $('#confirm-new-password').val();

            if (newPassword === '') {
                alert('请输入新密码');
                return;
            }

            if (newPassword!== confirmNewPassword) {
                alert('两次输入的新密码不一致，请重新输入');
                return;
            }

            $.ajax({
                url: '/updateUser/change-password',
                method: 'POST',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: {
                    newPassword: newPassword
                },
                success: function (data) {
                    if (data.msg === '修改成功') {
                        alert('密码修改成功');
                        $('#change-password-form').hide();
                        $('#change-password-button').show();
                        $('#old-password').val('');
                        $('#new-password').val('');
                        $('#confirm-new-password').val('');
                        $('#new-password-fields').hide();
                        $('#verify-old-password').show();
                    } else {
                        alert('密码修改失败');
                    }
                },
                error: function () {
                    alert('密码修改失败，请稍后重试');
                }
            });
        });

        // 新增的更新头像按钮点击事件处理函数
        $('#update-avatar').click(function () {
            const fileInput = $('<input type="file" accept="image/*">');
            fileInput.click();
            fileInput.on('change', function () {
                const file = this.files[0];
                if (file) {
                    const formData = new FormData();
                    formData.append('avatar', file);

                    $.ajax({
                        url: '/updateUser/update-avatar',
                        method: 'POST',
                        xhrFields: {
                            withCredentials: true
                        },
                        crossDomain: true,
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            if (data.msg === '更新成功') {
                                alert('头像更新成功');
                                // 重新加载用户信息以显示新头像
                                window.location.reload();
                            } else {
                                alert('头像更新失败');
                            }
                        },
                        error: function () {
                            alert('请求更新头像失败，请稍后重试');
                        }
                    });
                }
            });
        });

        // 点击放大图片容器关闭放大效果
        $('#enlargedImageContainer').click(function () {
            $(this).css('display', 'none');
        });
    });
</script>
</body>

</html>